<!--  -->
<template>
    <div class="invoiceManage page-main">
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="公司名称">
                <el-input v-model="formInline.company_name" placeholder="输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="formInline.status" placeholder="选择状态" @change="changeStatusSelect">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="申请中" value="1"></el-option>
                    <el-option label="已开票" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="批次号">
                <el-input v-model="formInline.batch_number" placeholder="输入批次号"></el-input>
            </el-form-item>
            <el-form-item label="申请时间">
                <el-date-picker v-model="filterapply_time" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="所属地区">
                <el-select v-model="formInline.area_status" placeholder="选择所属公司" @change="onSubmit">
                <el-option label="全部" :value="-1"></el-option>
                <el-option v-for="(item, index) in getOfficesList" :key="item" :label="item" :value="index"></el-option>
                </el-select>
            </el-form-item>
        </CustomForm>

        <div class="main">
            <el-descriptions :column="2" border>
                <el-descriptions-item :span="1" :labelStyle="labelStyle" :contentStyle="contentStyle">
                <template slot="label">总金额</template>
                {{ invoiceInfo.money }} (元)
                </el-descriptions-item>
                <el-descriptions-item :span="1" :labelStyle="labelStyle" :contentStyle="contentStyle">
                <template slot="label">含税金额</template>
                {{ invoiceInfo.money_bill }} (元)
                </el-descriptions-item>
            </el-descriptions>
            <el-table border v-loading="tableLoading" ref="multipleTable" :data="tableData" height="620" tooltip-effect="dark"
                style="width: 100%;">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column prop="batch_number" label="批次号" align="center"></el-table-column>
                <el-table-column prop="company" :show-overflow-tooltip="true" label="公司名称"
                    align="center"></el-table-column>
                <el-table-column prop="money" label="总金额(元)" align="center" width="120"></el-table-column>
                <el-table-column prop="money_bill" label="含税金额(元)" align="center" width="120"></el-table-column>
                <el-table-column prop="number" label="总单数" align="center" width="80"></el-table-column>
                <el-table-column prop="weight" label="总重量(吨)" align="center" width="100"></el-table-column>
                <el-table-column prop="tax" label="税号" align="center"></el-table-column>
                <el-table-column prop="add_time" label="申请时间" align="center"></el-table-column>
                <el-table-column prop="status" label="支付状态" align="center" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 1" style="color: blue">申请中</span>
                        <span v-if="scope.row.status == 2" style="color: green">已开票</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="260">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 1" size="mini" type="primary"
                            @click="ticketHandler(scope.row)">开票</el-button>

            
                        <el-button size="mini" type="primary"
                            @click="showDetailDialog(scope.row.batch_number)">详情</el-button>
                        <el-button v-if="scope.row.url" size="mini" @click="downloadFile(scope.row.url)">下载</el-button>
                        <el-dropdown trigger="click" v-if="scope.row.status == 2">
                            <span class="el-dropdown-link">
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <el-button size="mini" type="primary"
                                        @click="updateInvoiceMoney(scope.row)">修改含税金额</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button v-if="scope.row.status == 2" size="mini" type="primary"
                                        @click="ticketHandler(scope.row,true)">重新开票</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="$pageSizeList" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

            <el-dialog class="dialog" title="发票详情" :close-on-click-modal="true" :visible.sync="dialogVisible" top="5vh"
                width="80%">
                <InvoiceDetailDialog v-if="dialogVisible" :batch_number="batch_number" @closeDialog="closeDialog" />
            </el-dialog>

            <el-dialog class="dialog" custom-class="invoiceDialog" :title="reUpload ? '重新开票' : '开票'" :close-on-click-modal="false"
                :visible.sync="dialogVisibleTicket" top="10vh" width="50%">
                <Ticket v-if="dialogVisibleTicket" :row="ticketRows" @closeDialog="closeTicketDialog" :reUpload="reUpload" />
            </el-dialog>


            <el-dialog title="修改含税金额" :visible.sync="dialogVisibleupdateInvoiceMoney" :close-on-click-modal="false"
                custom-class="updateInvoiceMoney" width="30%">
                <updateInvoiceMoneyDialog :updateInvoiceMoneyForm="updateInvoiceMoneyForm"
                    @closeDialog="closeUpdateInvoice">
                </updateInvoiceMoneyDialog>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import updateInvoiceMoneyDialog from "./components/updateInvoiceMoneyDialog";
import InvoiceDetailDialog from "./components/invoiceDetailDialog";
import Ticket from "./components/ticket";
import { invoiceDetails } from "@/api/moneyManagment.js";
import { downloadFile } from "@/utils/tool";
import {getOfficesList} from "@/utils/auth"
export default {
    name:'invoiceDetail',
    //import引入的组件需要注入到对象中才能使用
    components: {
        InvoiceDetailDialog,
        Ticket,
        updateInvoiceMoneyDialog
    },
    data() {
        //这里存放数据
        return {
            getOfficesList: getOfficesList(),
            reUpload:false,//重新开票标识
            dialogVisible: false,
            batch_number: '',
            invoiceInfo:{
                money:0,
                money_bill:0
            },
            currentPage: 1,
            pageSizeList: [10, 20, 30, 40],
            total: 0,
            pageSize: 10,

            tableLoading: true,
            labelStyle: { "text-align": "center", "font-weight": "bold" },
            contentStyle: {
                color: "#444",
                "font-weight": "bold",
                "min-width": "200px"
            },
            tableData: [],
            filterapply_time:'',
            formInline: {
                batch_number: "", //批次号
                status: '0',
                company_name:'',
                apply_time:'',
                area_status:0,
            },
            rows: [],
            dialogVisibleTicket: false,
            ticketRows: {},
            dialogVisibleupdateInvoiceMoney: false,
            updateInvoiceMoneyForm: {
                id: "",
                money_bill: 0,
            }
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},

    //生命周期 - 创建完成（可以访问当前this实例）
    created() { },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.invoiceDetails();
    },
    //方法集合
    methods: {
        //关闭支付详情弹框
        closeDialog() {
            this.dialogVisible = false;
            //重新刷新表格
            this.currentPage = 1;
            this.invoiceDetails();

            //更新账户信息
            //this.$store.dispatch("user/setAccountBalance");
        },
        showDetailDialog(batch_number) {
            this.batch_number = batch_number;
            this.dialogVisible = true;
        },
        async invoiceDetails() {
            this.tableLoading = true;

            let result = await invoiceDetails({
                ...this.formInline,
                pageSize: this.pageSize,
                page: this.currentPage
            });
            this.tableLoading = false;

            if (result.code == 200) {
                this.tableData = result.data.list;
                this.total = result.data.total;
                this.invoiceInfo = result.extra;
            }
        },
        async getSelection() {
            let rows = this.$refs.multipleTable.selection;

            if (!rows.length) {
                this.$message.error("请选择要操作的项");
                return;
            }
            //判断是否存在已转账数据
            if (rows.some(item => item.is_invoice != 0)) {
                this.$message.error("存在已开票订单，请重新选择");
                return;
            }
            this.rows = rows;
            this.dialogVisible = true;
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.invoiceDetails();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.invoiceDetails();
        },
        downloadFile,
        onSubmit() {
            this.formInline.page = 1;
            this.formInline.apply_time = (this.filterapply_time ? this.filterapply_time : []).join(" - ");
            this.invoiceDetails();
        },
        resetTable() {
            this.filterapply_time = '';
            this.formInline = {
                batch_number: "", //批次号
                status: '',
                company_name:'',
                apply_time:''
            };

            this.invoiceDetails();
        },
        changeStatusSelect() {
            this.formInline.page = 1;
            this.invoiceDetails();
        },
        ticketHandler(row,reUpload = false) {
            this.reUpload = reUpload;
            this.ticketRows = row;
            this.dialogVisibleTicket = true;
        },
        closeTicketDialog() {
            this.dialogVisibleTicket = false;
            this.invoiceDetails();
        },
        updateInvoiceMoney(row) {
            this.updateInvoiceMoneyForm.id = row.id;
            this.updateInvoiceMoneyForm.money_bill = row.money_bill;
            this.dialogVisibleupdateInvoiceMoney = true;
        },
        closeUpdateInvoice() {
            this.dialogVisibleupdateInvoiceMoney = false;
            this.invoiceDetails();
        }
    }
};
</script>
<style lang='scss' scoped>
.invoiceManage {
    padding: 10px;
    background: #fff;

    .header {
        color: $theme-Danger;
        font-weight: bold;
        margin-bottom: 10px;

        .t1 {
            margin-right: 20px;
        }
    }

    .main {

        .tool {
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            padding: 5px;
            background: #fafafa;
        }
    }
}

::v-deep .el-dialog__header {
    padding-top: 10px;
    padding-left: 20px;
}

::v-deep .invoiceDialog {
    .el-dialog__body {
        height: auto !important;
        overflow: auto;
    }
}

::v-deep .el-dialog {
    overflow: hidden;

    .el-dialog__body {
        height: calc(88vh - 40px);
        overflow: auto;
    }
}

::v-deep .el-pagination {
    margin-top: 30px;
}

::v-deep .updateInvoiceMoney {
    .el-dialog__body {
        height: auto;
    }
}
</style>